<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 精选题库 -->
        <!-- 新增题库 -->
        <el-row
          type="flex"
          justify="space-around"
          style="width: 100%; height: 60px"
        >
          <!-- 左侧的说明-->
          <el-col>
            <span style="color: pink; font-size: 12px">
              说明：目前支持学科和关键字条件筛选
              </span>
          </el-col>
          <!-- 右侧的新增试题 -->
          <el-col :span="2">
            <el-button
            size="small"
            type="success"
            @click="$router.push(`/questions/new`)"
            >
              <i class="el-icon-edit"></i>
              新增题库
            </el-button>
          </el-col>
        </el-row>
        <!-- 筛选区 -->
        <el-form label-width="70px" :model="pagForm">
          <!-- 第一行 -->
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="学科">
                <el-select size="small" style="width: 230px"
                @change="simpleChange()"
                v-model="pagForm.subjectID">
                  <el-option
                    v-for="item in disciplineList"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                    ></el-option
                  >
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="二级目录">
                <el-select size="small" style="width: 230px"
                v-model="pagForm.catalogID"
                @change="tagsChange()">
                  <el-option
                  v-for="item in directorysList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="标签">
                <el-select size="small" style="width: 230px" v-model="pagForm.tags">
                  <el-option
                  v-for="item in tagsList"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="关键字">
                <el-input
                v-model="pagForm.keyword"
                  size="small"
                  style="width: 230px"
                  placeholder="根据题干搜索"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 第二行 -->
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="试题类型">
                <el-select size="small" style="width: 230px" v-model="pagForm.questionType">
                  <el-option :value="1" label="单选">单选</el-option>
                  <el-option :value="2" label="多选">多选</el-option>
                  <el-option :value="3" label="简答">简答</el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="难度">
                <el-select size="small" style="width: 230px" v-model="pagForm.difficulty">
                  <el-option :value="1" label="简单">简单</el-option>
                  <el-option :value="2" label="一般">一般</el-option>
                  <el-option :value="3" label="困难">困难</el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="方向">
                <el-select size="small" style="width: 230px" v-model="pagForm.direction">
                  <el-option value="o2o">o2o</el-option>
                  <el-option value="外包服务">外包服务</el-option>
                  <el-option value="企业服务">企业服务</el-option>
                  <el-option value="互联网金融">互联网金融</el-option>
                  <el-option value="企业咨询">企业咨询</el-option>
                  <el-option value="互联网">互联网</el-option>
                  <el-option value="电子商务">电子商务</el-option>
                  <el-option value="其他">其他</el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="录入人">
                <el-select size="small" style="width: 230px" v-model="pagForm.creatorID">
                  <el-option
                  v-for="item in usersList"
                  :key="item.value"
                  :label="item.username"
                  :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 第三行 -->
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="题目备注">
                <el-input size="small" style="width: 230px" v-model="pagForm.remarks"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="企业简称">
                <el-input size="small" style="width: 230px" v-model="pagForm.shortName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="城市">
                <el-select
                size="small"
                style="width: 115px"
                v-model="pagForm.province"
                @change="provinceChange">
                  <el-option
                  v-for="item in provincesList"
                  :key="item"
                  :value="item"
                  :label="item"
                  ></el-option>
                </el-select>
                <el-select size="small" style="width: 115px" v-model="pagForm.city">
                  <el-option
                  v-for="item in citysList"
                  :key="item"
                  :value="item"
                  :label="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-row type="flex" justify="end" style="width: 190px">
                <el-button @click="close">清除</el-button>
                <el-button type="primary" @click="getChoice()">搜索</el-button>
              </el-row>
            </el-col>
          </el-row>
        </el-form>
        <!-- 表格数据显示区 -->
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="全部" name="first">
            <!-- 消息提示 -->
            <el-tag type="info" style="width: 100%">
              <i class="el-alert__icon el-icon-info"></i>
              {{ dataLong }}
            </el-tag>
            <!-- 表格 -->
            <table-vue
              :items="pagList"
              :value="pagForm"
              @change="pageChange"
            ></table-vue>
          </el-tab-pane>
          <el-tab-pane label="待审核" name="second">
            <!-- 消息提示 -->
            <el-tag type="info" style="width: 100%">
              <i class="el-alert__icon el-icon-info"></i>
              {{ dataLong }}
            </el-tag>
            <!-- 表格 -->
            <table-vue
              :items="pagList"
              :value="pagForm"
              @change="pageChange"
            ></table-vue>
          </el-tab-pane>
          <el-tab-pane label="已审核" name="third">
            <!-- 消息提示 -->
            <el-tag type="info" style="width: 100%">
              <i class="el-alert__icon el-icon-info"></i>
              {{ dataLong }}
            </el-tag>
            <!-- 表格 -->
            <table-vue
              :items="pagList"
              :value="pagForm"
              @change="pageChange"
            ></table-vue>
          </el-tab-pane>
          <el-tab-pane label="已拒绝" name="fourth">
            <!-- 消息提示 -->
            <el-tag type="info" style="width: 100%">
              <i class="el-alert__icon el-icon-info"></i>
              {{ dataLong }}
            </el-tag>
            <!-- 表格 -->
            <table-vue
              :items="pagList"
              :value="pagForm"
              @change="pageChange"
            ></table-vue>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
  </div>
</template>

<script>
import TableVue from './questions-choice/table.vue'
import { choice } from '../../api/hmmm/questions'
import { simple } from '../../api/hmmm/subjects'
import { simple as directorysAPI } from '../../api/hmmm/directorys'
import { simple as tagsAPI } from '../../api/hmmm/tags'
import { simple as usersAPI } from '../../api/base/users'
import { provinces, citys } from '../../api/hmmm/citys'
export default {
  components: {
    TableVue
  },
  data () {
    return {
      // 控制
      activeName: 'first',
      // 省份列表
      provincesList: null,
      // 录入人列表
      usersList: {},
      // 市级列表
      citysList: {},
      // 学科列表
      disciplineList: {},
      // 二级目录列表
      directorysList: {},
      // 标签列表
      tagsList: {},
      // 表格数据列表
      pagList: [],
      pagForm: {
        city: null, // 所在城市
        province: null, // 所在省份
        shortName: null, // 企业简称
        remarks: null, // 题目备注
        creatorID: null, // 录入人
        direction: null, // 方向
        difficulty: null, // 难度
        questionType: null, // 试题类型
        keyword: null, // 关键字
        tags: null, // 标签名称
        subjectID: null, // 学科
        catalogID: null, // 二级目录
        counts: null, // 总数据数量
        page: 1, // 当前页
        pagesize: 5 // 页大小
      }
    }
  },
  created () {
    // 网页打开时候的渲染
    this.getChoice()
    this.getscreening()
  },
  computed: {
    // 计算数据条数
    dataLong () {
      return '数据一共有' + this.pagForm.counts + '条'
    }
  },
  methods: {
    // 手动清除  嘿嘿
    close () {
      this.pagForm = {
        city: null, // 所在城市
        province: null, // 所在省份
        shortName: null, // 企业简称
        remarks: null, // 题目备注
        creatorID: null, // 录入人
        direction: null, // 方向
        difficulty: null, // 难度
        questionType: null, // 试题类型
        keyword: null, // 关键字
        tags: null, // 标签名称
        subjectID: null, // 学科
        catalogID: null, // 二级目录
        counts: null, // 总数据数量
        page: 1, // 当前页
        pagesize: 5 // 页大小
      }
      // 数据重新显示
      this.getChoice()
    },
    // 省份发生改变的时候触发
    async provinceChange () {
      // 获取市级
      this.citysList = await citys(this.pagForm.province)
    },
    // 二级目录发生改变时候触发
    async tagsChange () {
      const res = await tagsAPI({ subjectID: this.pagForm.subjectID })
      this.tagsList = res.data
    },
    // 学科列表选择后触发
    async simpleChange () {
      // this.tagsList = this.tagsList.catalogID = null
      const res = await directorysAPI({ subjectID: this.pagForm.subjectID })
      this.directorysList = res.data
    },
    // 页码和表格的按钮触发事件时发生改变的时候
    pageChange (val) {
      if (typeof (val) === 'number') {
        this.pagForm.page = 1
        this.pagForm.pagesize = val
      } else if (val) {
        this.pagForm.page = val.page
        this.pagForm.pagesize = val.pagesize
      }
      this.getChoice()
    },
    // 页面切换时触发
    handleClick () {
      this.pagForm.page = 1
      this.getChoice()
    },
    // 筛选区域的获取数据
    async getscreening () {
      // 获取学科数据
      const { data } = await simple()
      this.disciplineList = data
      // 获取录入人列表
      const res = await usersAPI()
      this.usersList = res.data
      // 获取省份列表
      this.provincesList = provinces()
    },
    // 获取精选题库列表
    async getChoice () {
      // 判断是哪个页面  对应渲染
      let res = null
      if (this.activeName === 'first') {
        res = await choice(this.pagForm)
      } else if (this.activeName === 'second') {
        res = await choice({ ...this.pagForm, chkState: 0 })
      } else if (this.activeName === 'third') {
        res = await choice({ ...this.pagForm, chkState: 1 })
      } else if (this.activeName === 'fourth') {
        res = await choice({ ...this.pagForm, chkState: 2 })
      }
      this.pagList = res.data.items
      this.pagForm.counts = res.data.counts
      // 格式处理
      const dayjs = require('dayjs')
      this.pagList.map((item) => {
        // 转换时间格式
        item.addDate = dayjs(new Date(item.addDate)).format(
          'YYYY-MM-DD HH:mm:ss'
        )
        // 去除标签
        item.question = item.question.replace(/<[^>]+>/g, '')
      })
    }
  }
}
</script>

<style scoped></style>
